<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-pop.css"/>
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.membermain{
				width: 100%;
				padding: 2%;
				background-color: white;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.place{
			}
			.inpr{
				text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.name>div,.content>div,.footbz>div{
				padding: 2px;
			}
			.name,.content,.footbz{
				padding: 5px 0;
			}
			.headerdiv{
				display: flex;
				align-content: center;
				justify-content: center;
			}
			.headerdiv>.name{
				width: 80%;
			}
			.headerdiv>.headerimg{
				width: 20%;
			}
			.headerimg{
				max-width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.headerimg>img{
				width: 80%;
				border-radius: 50%;
			}
			
			.listdiv2 {
			    width: 100%;
			    height: 60vh;
			    overflow: hidden;
			    overflow-y: auto;
			    background-color: white;
			}
			.listwai{
				position: relative;
				height: 100%;
			}
			.smimg{
				display: inline-block;
				width: 10%;
			}
			.mui-input-row label {
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    line-height: 1.1;
			    float: left;
			    width: 35%;
			    padding: 11px 15px;
			}
			.mui-input-row #card_number{
			    float: left;
			    width: 55%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			}
			.mui-input-row .smimg{
				position: relative;
			    float: right;
			    width: 10%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			   	padding-top: 5px;
			}
			.smimg>img{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">修改会员</h1>
		    <div class="ic mui-icon-right-nav mui-pull-right" id="adddiv">保存</div>
		</header>
		<div class="mui-content">
		    <div class="membermain">
		    	<div class="headerdiv">
			    	<div class="name">
			    		<div class="mui-input-row borbot">
			    		    <label>卡号</label>
			    		    <input id="card_number" disabled="disabled" type="text" class="inpr " placeholder="请输入卡号（必填）">
			    			<div class="smimg" id="goscann">
			    				<img class="" src="../../img/saomiao.png"/>
			    			</div>
			    		</div>
			    		<div class="mui-input-row">
			    		    <label>姓名</label>
			    		    <input id="username" type="text" class="inpr" placeholder="请输入会员姓名（必填）">
			    		</div>
			    	</div>
			    	<div class="headerimg">
			    		<img id="memberimg" src="../../img/member-header.png"/>
			    	</div>
		    	</div>
		    	<div class="content">
		    		<div class="mui-input-row borbot" >
		    			<label>等级</label>
			    		<div class="place items" >
						    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">等级选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>手机号码</label>
		    		    <input id="phone" type="text" class="inpr" placeholder="请输入手机号">
		    		</div>
		    		<div class="mui-input-row borbot">
		    			<label>性别</label>
			    		<div class="place items" >
						    <button id='gender' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">默认保密</button>
						</div>
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    			<label>生日</label>
			    		<div class="place items" >
						    <button id='birthday' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>身份证号</label>
		    		    <input id="id_card" type="text" class="inpr" placeholder="请输入身份证">
		    		</div>
		    		<div class="mui-input-row">
		    		    <label>车牌号</label>
		    		    <input id="plate_number" type="text" class="inpr" placeholder="请输入身车牌号">
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    			<label>地区</label>
			    		<div class="place items">
						    <button id='address' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">地区选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>详细地址</label>
		    		    <input id="addressinp" type="text" class="inpr" placeholder="请输入详细地址">
		    		</div>
		    		
		    		<div class="mui-input-row">
		    		    <label>推荐人</label>
		    		    <div class="place items">
						    <button id='recommend' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">推荐人选择</button>
						</div>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-14
                        	描述：
		    		    <input type="text" class="inpr" placeholder="请输入推荐人姓名">
                        -->
		    		</div>
		    	</div>
		    	
		    	<div class="footbz">
		    		<div class="mui-input-row">
		    		    <label>备注</label>
		    		    <input id="remark" type="text" class="inpr" maxlength="50" placeholder="限制50字内">
		    		</div>
		    	</div>
		    </div>
			</div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/camera.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var levelnum = 1,	//会员等级
			gendernum = 0,		//性别
			recommend_id = 0,	//推荐员工
			images_id = 0,		//头像id
			images_path="",		//头像路径
			province="",		//省
			city="",			//市
			area="",			//区
			page=null,			//照相
			mid = 0;			//会员id
			window.onload = function(){
				mui.init();
				mid = getrequest().mid||5;
				mui.plusReady(function(){
					g("memberimg").addEventListener("tap",function(e){
						page.imgUp();    
					})
					page={  
		                imgUp:function(){  
		                    var m=this;  
		                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
		                        {title:"拍照"},  
		                        {title:"从相册中选择"}  
		                    ]}, function(e){//1 是拍照  2 从相册中选择  
		                        switch(e.index){  
		                            case 1:appendByCamera(function(res){cutimage(res);});break;
		                            case 2:appendByGalleryone(function(res){cutimage(res);});break;
		                        }  
		                    });  
		                }  
		                //摄像头  
		            } 
				})
				
				
				mui.ready(function() {
					
					var data1 = {
						url:"/api/member_level/lst",
						data:{access_token:acctoken()}
					}
					ajax(data1,function(res){
						console.log("等级列表",res)
						var list1 = [];
						for(var i = 0; i < res.data.data.length; i++){
							var str = {value:res.data.data[i].id,text:res.data.data[i].member_level}
							list1.push(str);
						}
						var levelPicker = new mui.PopPicker();
		                levelPicker.setData(list1);
		                var level = document.getElementById('level');
		                level.addEventListener('tap', function(event) {
		                    levelPicker.show(function(items) {
		                        level.innerText = items[0].text;
		                        levelnum = items[0].value;
		                        console.log(levelnum);
		                    });
		                }, false);
					})
					
                
                
                var genderPicker = new mui.PopPicker();
                genderPicker.setData([{
                    value: 0,
                    text: '保密'
                },{
                    value: 1,
                    text: '男'
                }, {
                    value: 2,
                    text: '女'
                }]);
                var gender = document.getElementById('gender');
                gender.addEventListener('tap', function(event) {
                    genderPicker.show(function(items) {
                        gender.innerText = items[0].text;
                        gendernum = items[0].value;
                    });
                }, false);
                
                var timedata = get_time();
                var birthday = document.getElementById('birthday');
                birthday.addEventListener('tap', function(event) {
                	var birthdayPicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(1940, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(timedata.Y, timedata.M-1, timedata.D, timedata.h, timedata.m),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    birthdayPicker.show(function(e) {
                    	 birthday.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
         
         
                var addressPicker = new mui.PopPicker({
                    layer: 3
                });
                addressPicker.setData(cityData3);
                var address = document.getElementById('address');
                address.addEventListener('tap', function(event) {
                    addressPicker.show(function(items) {
                        address.innerText = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                    	province = (items[0] || {}).text;
                    	city = (items[1] || {}).text;
                    	area = (items[2] || {}).text;
                    });
                }, false);
                
                g("recommend").addEventListener('tap',function(e){
                	goselectmember();
                	//mui('#popover').popover('toggle',document.getElementById("popover"));
                })
                
            });
				//修改会员
				g("adddiv").addEventListener('tap',function(e){
					var data = {
						url:"/api/member/edit",
						data:{
							access_token:acctoken()||"",
							id:mid,
							//card_number:g("card_number").value,
							username:g("username").value,
							images_id:images_id||"",
							level_id:parseInt(levelnum),
							phone:g("phone").value||"",
							sex:parseInt(gendernum),
							birthday:g('birthday').innerText=="日期选择"?"":g('birthday').innerText,
							id_card:g("id_card").value||"",
							plate_number:g("plate_number").value||"",
							province:province||"",
							city:city||"",
							area:area||"",
							address:g("addressinp").value||"",
							recommend_id:recommend_id > 0?recommend_id:'',
							remark:g("remark").value||""
						}
					}
					console.log("传递数据："+JSON.stringify(data));
					ajax(data,function(res){
						mui.toast(res.msg);
						
						setTimeout(function(res){
							var cPage = plus.webview.currentWebview();
						    var bPage = cPage.opener();
						    bPage.evalJS("onshow();");
							mui.back();
						},0)
					})
					
				})
				g("goscann").addEventListener("tap",function(e){
					var list = {
                     	pageid:"addmembers2",
                     	returnfun:"setcard_number"
            		}
                    mui.openWindow({
                        url: '../../general/scanning-page.html',
                        id: 'scanning-page',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 300
                        },
                        waiting: {
                            autoShow: true
                        }
                	});
					
				})
				//getmember();
				mui('#scroll').scroll();  
				getmemberdetail();
			}
			
			function goselectmember() {
            		var list = {
                         pageid:"modify-the-member",
                         returnfun:"setmamber",
                         self:1
            		}
                    mui.openWindow({
                        url: '../../general/member-page.html?list='+JSON.stringify(list),
                        id: 'member-page',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
            }
			
			//设置推荐人
			window.addEventListener("setmamber", setmamber); //添加自定义事件，其他页面调用
			//window.addEventListener("setcard_number", setcard_number); //添加自定义事件，其他页面调用
			function setmamber(e) {
				console.log(JSON.stringify(e));
				recommend_id = e.detail.mid;
				g("recommend").innerHTML = e.detail.mname;
               // recommend_id = id;
				//g("recommend").innerHTML = name;
                	
            }
			
			
			
			//扫码页面调用
			function setcard_number(scan){
				console.log("回调")
				g("card_number").value = scan;
				
			}
			
			
			
			function getmemberdetail(){
				var data = {
						url:"/api/member/detail",
						data:{
							access_token:acctoken(),id:mid,
						}
					}
					
					ajax(data,function(res){
						console.log("会员详情",res);
						var list = res.data;
						g("card_number").value = list.card_number;
						g("username").value = list.username;
						if(list.images&&list.images.path_name){
							g("memberimg").src = list.images.path_name;
							images_id = list.images.id;
						}
						//images_path = list.headimg;
						if(list.member_level){
							g("level").innerHTML = list.member_level.member_level;
							levelnum = parseInt(list.member_level.id);
						}
						g("phone").value = list.phone;
						g('gender').innerHTML = list.sex == 1?"男": list.sex == 2?"女":"保密";
						gendernum  = list.sex;
						g('birthday').innerHTML = list.birthday;
						g("id_card").value = list.id_card;
						g("plate_number").value = list.plate_number;
						if(list.province ==""&&list.city==""&&list.area==""){
							g('address').innerHTML = "地区选择";
						}else{
							g('address').innerHTML = list.province +' '+list.city+' '+list.area;
						}
						province == list.province;
						city == list.city;
						area == list.area;
						g("addressinp").value = list.address;
						g("recommend").innerHTML = list.recommend_id>0?list.recommend_username:"无推荐人";
						recommend_id == list.recommend_id;
						g("remark").value = list.remark;
						
					})
				
			}
			
			
			window.addEventListener("updateimg", updateimg); //添加自定义事件，其他页面调用
			
			function updateimg(e) {
                	var imgurl = e.detail.img;
                	getBase64Image(imgurl,function(res){
                		console.log(res.dataURL);
                		console.log(res.dataURL.length);
                	var data = {
                		url:'/api/upload/image_base64',
                		data:{
                			access_token:acctoken(),
                			images:res.dataURL
                		}
                	}
		                ajax(data,function(resp){
		                	//console.log( hurl +"/uploads/images/"+ resp.data.name)
		                	console.log("resp:"+JSON.stringify(resp));
		                	//g("memberimg").src = hurl +'/uploads/images/'+ resp.data.name;
		                	g("memberimg").src = res.dataURL;
		                	images_id = resp.data.images_id;
		                	images_path = resp.data.name;
		                })
                })
            }
			function cutimage(path) {
            	console.log(path);
            		var list = {
            			 path: path,
                         //bmtype:300/240,
                         pageid:"modify-the-member",
                         returnfun:"updateimg"
            		}
                    mui.openWindow({
                        url: '../../general/cropper.html',
                        id: 'cropper',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
			
			
			function card(cardid){
				if(!(/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/.test(cardid))){
					mui.toast("身份证号有误，请重新输入");
					return false;
				}else{
					return true;
				}
			}
			function phone(phone){
				if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){ 
					mui.toast("手机号码有误，请重新输入"); 
					return false;
				}else{
					return true;
				}
			}
			
			function plate_number(str){
				if (str.length == 7){
			        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
			        if(!express.test(str)){
			        	mui.toast("车牌号有误，请重新输入"); 
			        }else{
			        	return true;
			        }
			    }else{
			    	mui.toast("车牌号有误，请重新输入"); 
			    	return false;
			    }
			}
		</script>
	</body>

</html>